<template>
  <div class="mod-config">
    <basic-container>
      <navigationRenWuShu :sign="{a:true,b:false,c:false,d:false,e:false,f:false}"></navigationRenWuShu>
      <div class="boxsty zhiBiao" v-if="zhiShow==1">
        <!-- <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">任务书创建</div>
        </div> -->
        <div  :height="searchheight" >
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
          <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
           <div  v-show="searchadvanced" >
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"  class="form-inline">
              <el-form-item label="发约人姓名">
                <el-input v-model="dataForm.fayueName" placeholder="发约人姓名" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="发约人职务">
                <el-input v-model="dataForm.fayueZhiwu" placeholder="发约人职务" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="受约对象">
                <el-input v-model="dataForm.shouyueName" placeholder="受约对象" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="对象职务">
                <el-input v-model="dataForm.shouyueZhiwu" placeholder="对象职务" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" type="primary" class="marginLeft"
                          @click="getDataList(1)">检索
                </el-button>
              </el-form-item>
            </el-form>
           </div>
        </div>
        <div style="height: 50px; border-bottom: 1px solid #b0bde2">
          <el-button type="primary"  @click="tswb()">推送文本审核</el-button>
          <el-button type="primary"  @click="fqqd()">发起签订</el-button>
          <el-button type="primary"  @click="ndts()">拟定推送</el-button>
          <el-button type="primary" @click="deleteBatch()" >批量删除</el-button>
          <el-dropdown class="mg-0-10">
            <el-button type="primary">
              指标填报<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>批量添加</el-dropdown-item>
              <el-dropdown-item>批量复用</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
<!--          <el-button type="primary" >打印</el-button>-->
<!--          <el-button type="primary" >导出</el-button>-->
<!--          <el-button type="primary" >导入</el-button>-->
          <el-button type="primary" @click="addOrUpdateHandle()">新增#</el-button>
        </div>
        <div class="avue-crud">
          <div  class="flex">
            <div class="mt10">
              任务书
              <span>
                  <el-radio v-model="radio" label="1">个人</el-radio>
                  <el-radio v-model="radio" label="2">机构</el-radio>
              </span>
            </div>
          </div>
          <el-table
            ref="table"
            style="width: 100%;margin-top:20px"
            :data="dataList"
            border
            v-loading="dataListLoading">
            <el-table-column type="selection"  width="55" header-align="center" align="center"></el-table-column>
            <el-table-column type="index" width="70" header-align="center" align="center" label="序号"></el-table-column>

            <el-table-column
              prop="workAssignName"
              header-align="center"
              align="center"
              label="任务书名称">
            </el-table-column>
            <el-table-column
            prop="shouyueName"
            header-align="center"
            align="center"
            min-width="120"
            label="受约人姓名">
            <template slot-scope="scope">
              <div v-for="(item,index) in cutout(scope.row.shouyueName).slice(0, 2)">
                <el-tooltip class="item" :disabled="cutout(scope.row.shouyueName).length<3" effect="dark" :content="scope.row.shouyueName" placement="top-start">
                  <span>{{item}}<span v-if="cutout(scope.row.shouyueName).length>2&&index==1">...</span></span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="shouyueZhiwu"
            header-align="center"
            align="center"
            min-width="180"
            label="受约人职务">

            <template slot-scope="scope">
              <div v-for="item in cutout(scope.row.shouyueZhiwu).slice(0, 2)">
                <el-tooltip class="item"  :disabled="item.length<8&&cutout(scope.row.shouyueZhiwu).length<3" effect="dark" :content="scope.row.shouyueZhiwu" placement="top-start">
                  <span>{{validatenull(item)?'-':item | ellipsis}}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fayueName"
            header-align="center"
            align="center"
            min-width="120"
            label="发约人姓名">
            <template slot-scope="scope">
              <div v-for="(item,index) in cutout(scope.row.fayueName).slice(0, 2)">
                <el-tooltip :disabled="cutout(scope.row.fayueName).length<3" class="item" effect="dark" :content="scope.row.fayueName" placement="top-start">
                <span>{{item}}<span v-if="cutout(scope.row.fayueName).length>2&&index==1">...</span></span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fayueZhiwu"
            header-align="center"
            align="center"
            min-width="180"

            label="发约人职务">
            <template slot-scope="scope">
              <div v-for="item in cutout(scope.row.fayueZhiwu).slice(0, 2)">
                <el-tooltip class="item" :disabled="item.length<8&&cutout(scope.row.fayueZhiwu).length<3" effect="dark" :content="scope.row.fayueZhiwu" placement="top-start">
                    <span>{{(validatenull(item)?'-':item) | ellipsis}}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
            <el-table-column
              prop="quotaauditStatus"
              header-align="center"
              align="center"
              min-width="120"
              label="指标审核状态">
              <template slot-scope="scope">
                <el-popover
                  placement="left"
                  width="120"
                  trigger="hover">
                  <p>
                  <div v-for="item in cutout(scope.row.quotaauditStatusstr)">
                    <span v-if="item.indexOf('已完成')!=-1" style="color:#0bbf4a">{{item}}</span>
                    <span v-else-if="item.indexOf('未完成')!=-1" style="color:red">{{item}}</span>
                    <span v-else>{{item}}</span>
                  </div>
                  <div slot="reference" class="name-wrapper">
                    <span v-if="scope.row.quotaauditStatus == 0">未填报</span>
                    <span v-else-if="scope.row.quotaauditStatus == 1">审核中</span>
                    <span v-else>已审核</span>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="workAssignAuditStatus"
              header-align="center"
              align="center"
              label="任务书状态">
              <template slot-scope="scope">
                <span v-html="cutout2(scope.row.workAssignAuditStatus)"/>
              </template>
            </el-table-column>

            <el-table-column
              header-align="center"
              align="center"
              width="200"
              fixed="right"
              label="操作">
              <template slot-scope="scope">
                <el-button type="primary" plain size="small" @click="checkDetails(scope.row)">修改查看</el-button>
                <el-button type="primary" plain size="small" @click="tracking(scope.row)">跟踪</el-button>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
      <!-- 弹窗, 新增  -->
      <RenWuShuForm v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @openZhibiao="openZhibiao" @refreash="refreash" ></RenWuShuForm>
      <!-- 编辑-->
      <zhibiaoForm v-if="zhiShow==2" :zhibiaoForm='zhibiaoForm' v-on:zhibiaoChild='zhibiaoChild'></zhibiaoForm>
      <!--      合同跟踪-->
      <genzongForm :genzongFormData='genzongFormData'></genzongForm>
      <!--      任务书编辑-指标-->
      <rwszbForm ref="rwszbForm" v-if="zhiShow==3" :rwszbForm='rwszbForm' v-on:zhibiaoChild='renwushuzbChild'></rwszbForm>
    </basic-container>
     <!--    发送指标部门-->
    <el-dialog title="请选择指标拟定部门" :close-on-click-modal="false" :visible.sync="zbvisible" append-to-body>
      <div style="height: 50vh">
        <el-row>
          <el-col :span="8">
            <div class="text-center">
              <el-tree
                :data="treeOrgData"
                show-checkbox
                node-key="id"
                :default-expanded-keys="[2, 3]"
                :default-checked-keys="[5]"
                :props="defaultProps"
                @check-change="handleCheckChange">
              </el-tree>
            </div>
          </el-col>
         <!-- <el-col :span="4">
            <div class="text-center" style="line-height: 50vh">
              <el-button type="primary" @click="fnConfirmSelectedData">选择机构<i class="el-icon-d-arrow-right el-icon&#45;&#45;right"></i></el-button>
            </div>
          </el-col>-->
          <!--<el-col :span="10">
            <div class="text-center">
              <el-table
                :data="confirmTreeData"
                border>
                <el-table-column
                  prop="label"
                  header-align="center"
                  align="center"
                  label="机构名称">
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="操作">
                  <template slot-scope="scope">
                    <el-button type="danger" plain size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>-->
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="ts()">推送</el-button>
      <el-button type="primary" plain @click="zbvisible = false">返回</el-button>
    </span>

    </el-dialog>
  </div>
</template>

<script>
import {getPage, delObj,deleteBatchHtcj,faqiqianding,renwundts,tuisongwenben,getNiDingList} from '@/api/hetongrenwu/gongzuorenwushu/workAssigncj'
import RenWuShuForm from '@/views/hetongrenwu/gongzuorenwushu/renwushucj/rwscj/rwscj-form'
import zhibiaoForm from '@/views/hetongrenwu/components/zhibiao-form.vue'
import genzongForm from '@/views/hetongrenwu/components/genzong-form.vue'
import rwszbForm from '@/views/hetongrenwu/components/renwushuzb-form.vue'
import {mapGetters} from 'vuex'

export default {
  components: {
    RenWuShuForm,
    zhibiaoForm,
    genzongForm,
    rwszbForm
  },
  data() {
    return {
      dataForm: {
        key: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      radio:'1',
      radioTwo:'1',
      zhiShow:'1',
      zhibiaoForm:{

      },
      genzongFormData:{},
      rwszbForm:{},
      searchadvanced: true,
      searchheight: '0',
      dialogVisible:'false',
      selectedTreeData:[],
      zbvisible:false,
      treeOrgData:[],
      confirmTreeData:[
        {
          id: 5,
          label: '二级机构'
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      show:false
    }
  },
  filters:{
        ellipsis(value){
          if (!value) return '';
          if (value.length > 8) {
            return value.slice(0,8) + '...'
          }
          return value
        }
      },
  watch:{
    radio(value){
      if(value){
        this.getDataList();
      }
    },
    radioTwo(value){
      if(value){
        this.getDataList();
      }
    }
  },
  created() {
    this.getDataList()
    this.getTreeData()

  },

  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    //获取树结构
    getTreeData(){
      getNiDingList().then(res=>{
       //console.log("数："+JSON.stringify(res))
        this.treeOrgData=res.data.data
      })
    },
      //树结构选中的数据
    handleCheckChange(data){
      var index =this.selectedTreeData.findIndex(item =>item.deptId==data.deptId)
      if(index==-1){
        this.selectedTreeData.push(data)
      }else{
        this.selectedTreeData.splice(index,1)
      }
    },
     //确定选择选中得机构
    fnConfirmSelectedData(){
      this.confirmTreeData=this.selectedTreeData
    },
    //保存后页面刷新
    refreash(data){
      if(data=="1"){
        this.getDataList();
      }

    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if(this.searchadvanced){
        this.searchheight= 'auto'
      }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      getPage(Object.assign({
        type:this.radio,
        fayueName:this.dataForm.fayueName,
        fayueZhiwu:this.dataForm.fayueZhiwu,
        shouyueZhiwu:this.dataForm.shouyueZhiwu,
        quotaauditStatus:this.dataForm.quotaauditStatus,
        workAssignAuditStatus:this.dataForm.workAssignAuditStatus,
        shouyueName:this.dataForm.shouyueName,
        current: this.pageIndex,
        size: this.pageSize
      })).then(response => {
        this.dataList = response.data.data.records
        this.totalPage = response.data.data.total
      })
      this.dataListLoading = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle(id) {
      this.$confirm('是否确认删除ID为' + id, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(id)
      }).then(data => {
        this.$message.closeAll();
        this.$message.success('删除成功')
        this.getDataList()
      })
    },
    //子集信息
    renwushuzbChild(data){
      if(data){
        this.zhiShow=1
      }
      this.getDataList();
    },
    //新增子集返回的数据(关闭修改页面，打开指标库维护)
    openZhibiao(data){
      this.addOrUpdateVisible = false;
      this.zhiShow=2;
      this.zhibiaoForm={
        enter:0,
        disabled:false
      }
    },
    //跟踪
    tracking(row){
      this.genzongFormData={
        dialogVisible:true,
        rowid:row.id
      }
    },
    checkDetails(obj){
      this.zhiShow=3;
      this.rwszbForm={
        status:0,
        enter:0,
        disabled:false
      }
      var params=Object.assign(obj,this.rwszbForm)
     //console.log(params);
      this.$nextTick(() => {
        this.$refs.rwszbForm.init(params)
      })
    },

    //变价查看子集信息返回
    zhibiaoChild(zhibiaoChild){
      if(zhibiaoChild){
        this.zhiShow=1
      }
      this.getDataList();
    },
    cutout(cellValue) {
      if (cellValue) {
        var c = cellValue.split(",");
        if(c.size<1){
          c.push('-');
          c.push('-');
        } else if(c.size<2){
          c.push('-');
        }
        return c;
      }
    },
    cutout2(cellValue) {
      if(cellValue==0){
        return '创建中';
      }
      if(cellValue==1){
        return '已拟定推送';
      }
      if(cellValue==2){
        return '审核中';
      }
      if(cellValue==3){
        return '审核退回';
      }
      if(cellValue==4){
        return '审核完成';
      }
      if(cellValue==5){
        return '签订中';
      }
      if(cellValue==6){
        return '已退回';
      }
      if(cellValue==7){
        return '审核通过';
      }
    },
    deleteBatch(){
      var data=this.$refs.table.selection;
      if(data.length==0){
        this.$message.error("请至少选择一个任务书！");
        return;
      }
      var ids=[];
      for(var i=0;i<data.length;i++){
        ids.push(data[i].id)
      }
      var idsStr=ids.join(',')
      this.$confirm('是否要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return deleteBatchHtcj({ids:idsStr})
      }).then(data => {
        this.$message.closeAll();
        this.$message.success('删除成功')
        this.getDataList()
      })
    },
    fqqd(){
      var data=this.$refs.table.selection;
      if(data.length==0){
        this.$message.error("请选择一个合同！");
        return;
      }
      if(data.length>1){
        this.$message.error("只能选择一个合同！");
        return;
      }
      if(data[0].workAssignAuditStatus!=4){
        this.$message.error("文本审核未完成，不允许发起签订！");
        return;
      }
      this.$confirm('是否要发起签订吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return faqiqianding(data[0].id)
      }).then(data => {
        this.$message.closeAll();
        this.$message.success('发起签订成功')
        this.getDataList()
      })
    },
    //拟定推送-外面
    ndts(){
      var data=this.$refs.table.selection;

      if(data.length==0){
        this.$message.error("请选择一个任务书！");
        return;
      }
      if(data.length>1){
        this.$message.error("只能选择一个任务书！");
        return;
      }
      if(data[0].workAssignAuditStatus!=0){
        this.$message.error("请选择创建中的任务书！");
        return;
      }
      if(data[0].quotaauditStatusstr=='未填报'){
        this.zbvisible=true;
      }else{
        this.$confirm('是否要拟定推送？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          return renwundts({id:data[0].id})
        }).then(data => {
          this.$message.closeAll();
          this.$message.success('拟定推送成功')
          this.getDataList()
        })
      }
    },
    //拟定推送-里面
    ts(){
      var data=this.$refs.table.selection;
      if(this.selectedTreeData.length==0){
        this.$message.error("拟定部门不能为空！");
        return false;
      }
      var ids=this.selectedTreeData.map(item=>{
        return item.deptId;
      })
      var idsStr=ids.join(',')
      this.$confirm('是否要拟定推送？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return renwundts({id:data[0].id,ndDeptId:idsStr})
      }).then(data => {
        this.$message.closeAll();
        this.$message.success('拟定推送成功')
        this.zbvisible=false;
        this.getDataList()
      })
    },
    tswb(){
      var data=this.$refs.table.selection;
      if(data.length==0){
        this.$message.error("请选择一个任务书！");
        return;
      }
      if(data.length>1){
        this.$message.error("只能选择一个任务书！");
        return;
      }
      if(data[0].quotaauditStatus!=2){
        this.$message.error("指标审核未完成，不允许推送文本审核！");
        return;
      }

      if(data[0].workAssignAuditStatus!=1){
        this.$message.error("只允许推送创建和驳回的合同！");
        return;
      }
      this.$confirm('是否要推送文本审核吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return tuisongwenben(data[0].id)
      }).then(data => {
        this.$message.closeAll();
        this.$message.success('推送文本审核成功')
        this.getDataList()
      })
    },
  }
}
</script>
